<template>
  <div>
    <div class="toplist">
      <p>
        <span>
          <van-icon name="arrow-left" />
        </span>
        <input type="text" placeholder="请输入楼层名称" v-model="values" @input="handle"/>
        <span>地图找房</span>
      </p>
    </div>
      <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" >
            <!-- 渲染区域 -->
          <div v-for="item in cityList" :key="item.id">
            <p @click="searchList(item)">{{item}}</p>
          </div>
        </van-dropdown-item>
                                                                           <!-- 这里不传参不能带(),要不然不会出现效果 -->
        <van-dropdown-item v-model="value2" :options="option2"  @change="broke">
           <!-- <div v-for="item in priceList" :key="item.id" >
            <p >{{item}}</p> -->
          <!-- </div> -->
         </van-dropdown-item>
   
        <van-dropdown-item v-model="value3" :options="option3">  
            <!-- <div v-for="item in pricelist" :key="item.id">
            <p @click="sales(item)">{{item}}</p>

          </div> -->
        </van-dropdown-item>
        <van-dropdown-item v-model="value4" :options="option4" > 
            <!-- <div v-for="item in pricelist" :key="item.id">
            <p @click="more(item)">{{item}}</p>

          </div> -->
        </van-dropdown-item>
    </van-dropdown-menu>
    <!-- 不要写在一块会报错 -->
    <!-- <van-tab v-for="(item,index) in tablist" :key="index" :title="item"></van-tab> -->
    <div v-for="(val,i) in list" :key="i" class="tablis" >
      <li @click="xiang(val.id)">
        <img :src="val.img" alt class="img-h" />
      </li>
      <div class="tab">
        <h3>{{val.listingTitle}}</h3>
        <p>{{val.detailAddress}}</p>
      </div>
    </div>
  </div>
</template>
<script>
import { getCityList,getAreaData,searchData,searchPrice} from "../api/user";
export default {
  data() {
    return {
      // shailist:["区域","价格","类型","更多"],

      values: "",
      type: 5,
      list: [],
      value1: 0,
      value2: "a",
      value3: "e",
      value4: 1,
      
      option1: [
        { text: "区域", value: 0 },
        { text: "西湖区", value: 1 },
        { text: "奉贤区", value: 2 }
      ],
      option2: [
        { text: "价格", value: "a" },
        { text: "不限", value: "b" },
        { text: "300以下", value: "c" },
        { text: "300-500", value: "d" },
        { text: "500-1000", value: "e" },
        { text: "1000以上", value: "f" }
      ],
      option3: [
        { text: "类型", value: "e" },
        { text: "小户型", value: "f" },
        { text: "大户型", value: "g" }
      ],
      option4: [
        { text: "更多", value: 1 },
        { text: "好评排序", value: 2 },
        { text: "销量排序", value: 3 }
      ],
      cityList:[],
     
     obj:{},
    //  priceList:[]
    };
  },
  created() {
    console.log(this);
    this.getRentList();
    this.getData()

  },
  methods: {
    getRentList() {
      getCityList({ classify: this.type ,values:this.values}).then(res => {
        this.list = res.data;
        console.log(res);
      });
    },
    getData(){
      getAreaData().then(res => {
        this.cityList = res.data
        console.log(res)
      })
    },
    searchList(item){
      console.log(item)
      searchData({area:item}).then(res => {
        this.list=res.data
      })
    },
    xiang(id){
      this.$router.push(`/detail/${id}`)
    },
    handle(){
      this.getRentList()
    },
    broke(e){
     if(e==="b"){
        searchPrice({classify:this.type,obj:{}}).then(res=>{
           this.list=res.data
        })
      

        
     }
      else if(e==="c"){
        searchPrice({classify:this.type,obj:{a:0,b:300}}).then(res=>{
           this.list=res.data
        })
      

        
     }
 else  if(e==="d"){
        searchPrice({classify:this.type,obj:{a:300,b:500}}).then(res=>{
           this.list=res.data
        })
      

        
     }
     if(e==="e"){
        searchPrice({classify:this.type,obj:{a:500,b:1000}}).then(res=>{
           this.list=res.data
        })
      

        
     }
     if(e==="f"){
        searchPrice({classify:this.type,obj:{a:1000,b:10000}}).then(res=>{
           this.list=res.data
        })
      

        
     }
         
         
      
    },
    sd(){
     

      
    }
  }
};
</script>
<style scoped="scss">
.toplist p {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  padding-top: 10px;
}
.toplist p input {
  width: 65%;
  height: 36px;
  border: solid 1px #ccc;
  border-radius: 10px;
}
.tablis {
  display: flex;
  margin-top: 10px;
}
.tablis li {
  width: 100px;
  height: 100px;
}
.tablis li img {
  width: 100%;
  height: 100%;
}
.tab {
  margin-left: 20px;
}
.nav{
  width: 100%;
  height: auto;
}
.img-h{
  margin-left: 10px;
}
</style>